<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Pointillism</h2>

<p>This code was updated from the Java source to work with Processing.js asynchronous image loading. <sup>-F1LT3R</sup></p> 

<p>by Daniel Shiffman. 

Mouse horizontal location controls size of dots. 
Creates a simple pointillist effect using ellipses colored
according to pixels in an image.</p>

<p><a href="http://processing.org/learning/basics/pointillism.html"><b>Original Processing.org Example:</b> Pointillism</a><br>
<script type="application/processing">
/* @pjs preload="data/eames.jpg"; */

PImage a;

void setup()
{
  a = loadImage("data/eames.jpg");
  size(200,200);
  noStroke();
  background(255);
  smooth();
}


void draw()
{ 
  float pointillize = map(mouseX, 0, width, 2, 18);
  int x = int(random(a.width));
  int y = int(random(a.height));
  color pix = a.get(x, y);
  fill(pix, 126);
  ellipse(x, y, pointillize, pointillize);
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"><img src='data/eames.jpg' id='eames.jpg'/><img src='data/sunflower.jpg' id='sunflower.jpg'/></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>

/* @pjs preload="data/eames.jpg"; */

PImage a;

void setup()
{
  a = loadImage("eames.jpg");
  size(200,200);
  noStroke();
  background(255);
  smooth();
}

void draw()
{ 
  float pointillize = map(mouseX, 0, width, 2, 18);
  int x = int(random(a.width));
  int y = int(random(a.height));
  color pix = a.get(x, y);
  fill(pix, 126);
  ellipse(x, y, pointillize, pointillize);
}</pre>
</body>
</html>
